import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Button, Card, Form, Input, Message } from "element-react";
import "./login.css";
import "element-theme-default";
import { login } from "../assets/js/http.js";
import { desEncrypt } from "../assets/js/utils.js";
class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    };
  }
  componentWillMount() {
    this.setState({
      form: {
        username: "",
        password: "",
      },
    });
  }
  // 提交参数到登录接口
  submit() {
    this.refs.form.validate(async (valid) => {
      if (valid) {
        let form = {
          username: this.state.form.username,
          password: desEncrypt(
            JSON.parse(JSON.stringify(this.state.form.password)),
            "01234567"
          ),
        };

        let { code, data, msg } = await login(form);
        if (code == 1) {
          this.state.form = {
            username: "",
            password: "",
          };
          Message({
            message: "恭喜你，登录成功",
            type: "success",
          });
          localStorage.setItem("user", JSON.stringify(data));
          this.props.history.push("/songhanUI/main");
        } else {
          Message({
            message: msg,
            type: "warning",
          });
        }
      } else {
        console.log("error submit!!");
        return false;
      }
    });
  }
  // 动态绑定表单值
  onchange(key, value) {
    this.setState({
      form: Object.assign({}, this.state.form, {
        [key]: value,
      }),
    });
  }
  // 去注册页面
  async goRegiste() {
    this.props.history.push("/registe");
  }
  render() {
    return (
      <div className="login">
        <div className="login_inner">
          <Card className="box-card">
            <h3 className="login_title"> 用户登录 </h3>
            <Form
              ref="form"
              model={this.state.form}
              rules={this.state.rules}
              labelWidth="80"
              className="demo-ruleForm"
            >
              <Form.Item label="用户名" prop="username">
                <Input
                  value={this.state.form.username}
                  onChange={this.onchange.bind(this, "username")}
                ></Input>
              </Form.Item>
              <Form.Item label="密码" prop="password">
                <Input
                  type="password"
                  value={this.state.form.password}
                  onChange={this.onchange.bind(this, "password")}
                ></Input>
              </Form.Item>
              <Form.Item labelWidth="0">
                <Button
                  type="primary"
                  className="wd-80"
                  onClick={this.submit.bind(this)}
                >
                  登录
                </Button>
              </Form.Item>
              <Form.Item labelWidth="0">
                <Button type="text" onClick={this.goRegiste.bind(this)}>
                  还没有账号 ? 去注册
                </Button>
              </Form.Item>
            </Form>
          </Card>
        </div>
      </div>
    );
  }
}
export default Login;
